<template>
  <div>
    <div class="base-steps">
      <div
        :class="[
          'base-step',
          active === index && 'active',
          active > index && 'base-steps-success'
        ]"
        v-for="(item, index) in stepData"
        :key="index"
        @click="getActive(index)"
      >
        <span class="base-num">
          <i class="el-icon-check" v-if="active > index"></i>
          <template v-else>{{ index + 1 }}</template>
        </span>
        <span class="base-tit">{{ item }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'base-steps-line',
  props: {
    // 步骤数
    active: {
      type: Number,
      default: 1
    },
    // 步骤条标题
    stepData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    getActive(index) {
      this.$emit('active', index)
    }
  }
};
</script>
<style lang="scss" scoped>
.base-steps {
  display: flex;
  justify-content: flex-start;
  // width: 543px;
  // margin: auto;
  // padding: 32px 0 16px;

  .base-step {
    position: relative;
    margin-right: 138px;
    .base-num {
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      display: inline-block;
      color: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(0, 0, 0, 0.25);
      border-radius: 50%;
    }

    .base-tit {
      color: #8c8c8cff;
      font-size: 14px;
      line-height: 24px;
      margin-left: 8px;
    }
    &:first-child {
      
    }
    &::after {
      content: '';
      position: absolute;
      left: 130px;
      top: 12px;
      display: block;
      width: 118px;
      height: 1px;
      background: #e6e6e6;
    }
    &:last-child {
      &::after {
        content: '';
        width: 0;
        height: 0;
      }
    }
  }
  // 当前步骤条的样式
  .active {
    .base-num {
      background: $color-primary;
      color: #fff;
      border: 1px solid #fff;
    }
    .base-tit {
      color: #262626ff;
      font-weight: 500;
    }
  }
  // 已完成步骤条的样式
  .base-steps-success {
    .base-num {
      color: $color-primary;
      border: 1px solid $color-primary;
    }
    .base-tit {
      color: #262626ff;
    }
    &:not(:last-child) {
      &::after {
        background: $color-primary;
      }
    }
  }
}
</style>
